﻿<div class="layui-card" id="lg-NewStudentList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>报名记录</div>
    <div class="layui-card-body" id="">
        <!--查询条件-->
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item" style="width:100px">
                <lg-form-date :data="{Title:'学年',Name:'Year'}" v-model:value="where.Year.Value" format="year" v-on:done="getPlansForOption"></lg-form-date>
            </div>
            <div class="lg-search-item" style="width:120px">
                <lg-form-select :data="{Title:'学期',Options:options.Semester}" v-model:value="where.Semester.Value" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-select :data="{Title:'班级',Options:options.Grades}" v-model:value="where.GradeId.Value" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:100px">
                <lg-form-select :data="{Title:'计划',Options:options.Plans}" v-model:value="where.PlanId.Value" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-singletext :data="{Title:'姓名'}" v-model:value="where.Name.Value" val-type="value"></lg-form-singletext>
            </div>
            <div class="lg-search-item" style="width:200px">
                <lg-form-idnumber :data="{Title:'证件号'}" v-model:value="where.IdNumber.Value" val-type="value"></lg-form-idnumber>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-phone :data="{Title:'手机'}" v-model:value="where.Phone.Value" val-type="value"></lg-form-phone>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-singletext :data="{Title:'流水号'}" v-model:value="where.SN.Value"></lg-form-singletext>
            </div>
            <div class="lg-search-item"  style="width:300px">
                <lg-form-daterange :data="{Title:'日期',Name:'AddTime'}" v-model:value="where.DateRange.Value" val-type="value"></lg-form-daterange>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-singletext :data="{Title:'家长姓名'}" v-model:value="where.FamilyName.Value" val-type="value"></lg-form-singletext>
            </div>
            <div class="lg-search-item" style="width:200px">
                <lg-form-phone :data="{Title:'家长手机'}" v-model:value="where.FamilyPhone.Value" val-type="value"></lg-form-phone>
            </div>

            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="onSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="OpenColMapControlPanel"><i class="fa fa-cog fa-fw"></i>字段配置</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="exportExcel"><i class="fa fa-file-excel-o fa-fw"></i>导出</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary refresh" v-on:click="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':applys.length>0&&checked.length==applys.length}]" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                            </th>
                            <th v-for="item in showCol" :style="{'width':item.Width?item.Width+'px':'auto'}">{{item.Title}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in applys">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]" lay-skin="primary" v-on:click="onRowCheck(row)"><i class="layui-icon layui-icon-ok"></i></div>
                            </td>
                            <td v-for="column in showCol">{{FormatValue(column.Name,row[column.Name])}}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="applys.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
    <div class="fieldWrap" id="colMapWrap" v-show="colmapState" style="position:relative;width:700px;">
        <div class="field-head">
            <div class="lg-form-item">
                <div class="lg-form-td name">字段名</div>
                <div class="lg-form-td">查看</div>
                <div class="lg-form-td">导出</div>
                <div class="lg-form-td">字段宽度</div>
                <div class="lg-form-td">排序（拖动）</div>
            </div>
        </div>
        <div class="field-body">
            <draggable :list="colmaps" handle=".drag" ghost-class="ghost" :force-fallback="true" chosen-class="choseClass" animation="300" delay="2" item-key="1">
                <template #item="{ element }">
                    <div class="lg-form-item">
                        <div class="lg-form-td"><input type="text" class="name" v-model="element.Title" /></div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsShow}]"
                                 v-on:click="element.IsShow=!element.IsShow" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsExport}]"
                                 v-on:click="element.IsExport=!element.IsExport" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td"><input type="number" class="width" placeholder="宽度" v-model="element.Width" /></div>
                        <div class="lg-form-td drag" title="调整顺序"><i class="fa fa-bars fa-fw"></i></div>
                    </div>

                </template>
            </draggable>
        </div>
        <div class="field-help">
            <p>*宽度不填写则默认宽度,可点击图标<i class="fa fa-bars fa-fw"></i>拖动位置顺序。</p>
        </div>
        <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':exportAll}]"
             v-on:click="onCheckAll('IsExport')" lay-skin="primary">
            <i class="layui-icon layui-icon-ok"></i><span>全部设为导出</span>
        </div>
        <div class="field-foot">
            <a href="javascript:;" class="layui-btn layui-btn-normal" v-on:click="saveColMaps(0)">保存设置</a>
            <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-danger" v-on:click="saveColMaps(1)">保存并关闭</a>
        </div>
    </div>
</div>
<script class="tempScript" type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        colmaps: [],//接口传过来的所有字段列表
                        applys: [],
                        pager: {
                            Page: 1,
                            Limit: 10
                        },
                        where: {
                            Year: { Name: "Year", Value: "" },
                            Semester: { Name: "Semester", Value: "" },
                            GradeId: { Name: "GradeId", Value: "" },
                            PlanId: { Name: "PlanId", Value: "" },
                            IdNumber: { Name: "IdNumber", Value: "" },
                            Phone: { Name: "Phone", Value: "" },
                            Name: { Name: "Name", Value: "", Key: "模糊匹配" },
                            DateRange: { Name: "DateRange", Value: "" },
                            FamilyName: { Name: "lg965720,lg132315", Value: "", Key: "模糊匹配" },
                            FamilyPhone: { Name: "lg039724,lg534904", Value: "", Key: "模糊匹配" },
                            IsDelete: { Name: "IsDelete", Value: "0" },
                            SN: { Name: "SN", Value: "" }
                        },
                        checked: [],
                        options: {
                            Semester: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "1",
                                    Value: 1
                                },
                                {
                                    Text: "2",
                                    Value: 2
                                }],
                            Grades: [],
                            Plans: [],
                            IsThisSchool: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "是",
                                    Value: "是"
                                },
                                {
                                    Text: "否",
                                    Value: "否"
                                }]
                        },
                        loading: false,
                        colmapState: false,
                        importAcceptState: false,
                    }
                },
                mounted: function() {
                    this.GetColMaps();
                    this.GetApplys();
                    this.getGradesAndSetOption();
                    this.getPlansForOption();
                },
                computed: {
                    showCol: function() {
                        return this.colmaps.filter(p => p.IsShow);
                    },
                    exportCol: function() {
                        return this.colmaps.filter(p => p.IsExport);
                    },
                    exportFiledCount: function() {
                        var checkCount = this.colmaps.filter(p => p.IsExport).length;
                        var count = this.colmaps.length;
                        return "(" + checkCount + "/" + count + ")";
                    },
                    exportAll: function() {
                        var checkCount = this.colmaps.filter(p => p.IsExport).length;
                        var count = this.colmaps.length;
                        return checkCount == count;
                    }
                },
                methods: {
                    GetApplys: function() {
                        this.loading = true;
                        this.applys = [];
                        var where = this.formatWhere(true);
                        lg.request({
                            url: "/api/sys/apply/GetNewStudentList",
                            method: "post",
                            data: { where: JSON.stringify(where) },
                            success: res => {
                                if (res.code == 0) {
                                    this.applys = this.FormatData(res.data) || [];
                                    this.setPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    onSearch: function() {
                        this.pager.Page = "1";
                        this.GetApplys();
                    },
                    formatWhere: function(isPager) {
                        var where = [];
                        for (let key in this.where) {
                            if (this.where[key].Value != "") {
                                where.push(this.where[key])
                            }
                        }
                        if (isPager == true) {
                            where.push({ "Name": "Page", Value: this.pager.Page });
                            where.push({ "Name": "Limit", Value: this.pager.Limit })
                        }
                        return where;
                    },
                    refresh: function() {
                        this.GetApplys();
                    },
                    setPage: function(count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager'
                            , curr: that.pager.Page
                            , limit: that.pager.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function(obj, first) {
                                if (!first) {
                                    that.pager.Page = obj.curr;
                                    that.pager.Limit = obj.limit;
                                    that.GetApplys();
                                }
                            }
                        });
                    },
                    exportExcel: function() {
                        var arry = this.colmaps.filter(p => p.IsExport);
                        var where = this.formatWhere();
                        if (arry.length > 0) {
                            this.exportbtn = false;
                            var obj = {};
                            for (let i in arry) {
                                obj[arry[i].Name] = arry[i].Title;
                            }
                            lg.getFile({
                                url: "/api/sys/apply/exportNewStudent",
                                fileName: "报名数据-" + lg.GetDate("yyyyMMddHHmmss"),
                                data: { where: JSON.stringify(where), cols: JSON.stringify(obj) }
                            })
                        } else {
                            layer.msg("请选择列后再执行导出！", { icon: 2 })
                        }
                    },
                    isChecked: function(item) {
                        return this.checked.filter(p => p.Id == item.Id).length == 1;
                    },
                    onRowCheck: function(item) {
                        if (this.isChecked(item)) {
                            this.checked = this.checked.filter(p => p.Id != item.Id);
                        } else {
                            this.checked.push(item);
                        }
                    },
                    onRowCheckAll: function() {
                        var b = this.checked.length == this.applys.length;
                        if (b) {
                            this.checked = []
                        } else {
                            var arry = [];
                            for (let i in this.applys) {
                                arry.push(this.applys[i]);
                            }
                            this.checked = arry;
                        }

                    },
                    onCheckAll: function(attr) {
                        var b = false;
                        var checkCount = this.colmaps.filter(p => p[attr]).length;
                        var count = this.colmaps.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.colmaps) {
                            this.colmaps[i][attr] = !b;
                        }
                    },
                    GetColMaps: function() {
                        lg.request({
                            url: "/api/sys/apply/GetNewStudentColMaps",
                            success: res => {
                                if (res.code == 0) {
                                    this.colmaps = res.data;
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    saveColMaps: function(isClosePanel) {
                        lg.request({
                            url: "/api/sys/apply/SaveNewStudentColMaps",
                            method: "post",
                            data: { maps: JSON.stringify(this.colmaps) },
                            success: res => {
                                if (res.code == 0) {
                                    if (isClosePanel == 1) {
                                        layer.closeAll();
                                    }
                                    layer.msg("保存成功！", { icon: 1 });
                                }
                            }
                        })
                    },
                    getPlansForOption: function() {
                        lg.request({
                            url: "/api/sys/apply/getPlanList",
                            data: {
                                Page: 1,
                                Limit: 9999,
                                Year: this.where.Year.Value,
                                Semester: this.where.Semester.Value,
                                GradeId: this.where.GradeId.Value
                            },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        var arry = [{ Text: '不限', Value: '' }];
                                        for (let i in res.data) {
                                            arry.push({ Text: res.data[i].Title, Value: res.data[i].Id });
                                        }
                                        this.options.Plans = arry;
                                    } else {
                                        this.options.Plans = [];
                                    }
                                }
                            }
                        })
                    },
                    getGradesAndSetOption: function() {
                        lg.request({
                            url: "/api/sys/apply/GetGradeList",
                            data: { page: 1, limit: 999 },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null && res.data.length > 0) {
                                        var grades = this.Sort(res.data, 0, []);
                                        var options = [{ Text: '不限', Value: '' }];
                                        for (let i in grades) {
                                            options.push({
                                                Text: grades[i].FullName,
                                                Value: grades[i].Id
                                            })
                                        }
                                        this.options.Grades = options;
                                    } else {
                                        this.options.Grades = [];
                                    }
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    Sort: function(data, fid, arr) {
                        var that = this
                        var grades = data.filter(d => d.FatherId == fid)
                        if (grades.length > 0) {
                            for (let i in grades) {
                                var obj = grades[i];
                                arr.push(obj);
                                that.Sort(data, obj.Id, arr)
                            }
                        }
                        return arr;
                    },
                    FormatData: function(data) {
                        if (data) {
                            for (let i in data) {
                                var row = data[i];
                                var formData = lg.convert.toJson(row.FormData, null);
                                if (formData) {
                                    for (let key in formData) {
                                        var val = formData[key];
                                        if (val == 'lg-no-render') {
                                            val = "";
                                        }
                                        else {
                                            if (typeof val == "object") {
                                                val = val.Value || val.value;
                                            } else {
                                                var obj = lg.convert.toJson(val, null);
                                                if (obj) {
                                                    val = val = obj.Value || obj.value;
                                                }
                                            }

                                        }
                                        row[key] = val;
                                    }
                                }
                            }
                        }
                        return data;
                    },
                    FormatValue: function(key, val) {
                        if (key == "PayState") {
                            switch (val) {
                                case 1:
                                    return "待支付";
                                case 2:
                                    return "已支付";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "PassState") {
                            switch (val) {
                                case 1:
                                    return "已录取";
                                case 2:
                                    return "未录取";
                                case 3:
                                    return "待定";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "Tuition") {
                            switch (val) {
                                case 1:
                                    return "待缴费";
                                case 2:
                                    return "预缴费";
                                case 3:
                                    return "已缴费";
                                case 4:
                                    return "申请退费";
                                case 5:
                                    return "已退费";
                                case 6:
                                    return "放弃缴费";
                                default:
                                    return "";
                            }
                        }
                        else {
                            return val;
                        }
                    },
                    OpenColMapControlPanel: function() {
                        this.colmapState = true;
                        layer.open({
                            type: 1,
                            title: "字段配置",
                            content: $("#colMapWrap")
                        })
                    }
                }
            })
            freeForm.regComponent(app);
            app.component('draggable', window.vuedraggable);
            this.vm = app.mount("#lg-NewStudentList");
        },
        methods: {
            reload: function() {
                this.vm.refresh();
            },
        }
    }).mount();
</script>